<template>
  <div>
    <div id="chart" class="chart" :option="option" style="width:800px" />
  </div>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "HelloWorld",
  watch: {
    source(newvalue) {
      console.log(newvalue);
      var chartDom = document.getElementById("chart");
      var myChart = this.$echarts.init(chartDom);
      var option;
      var sourses = newvalue;

      setTimeout(function() {
        console.log(sourses),
          (option = {
            legend: {},
            tooltip: {
              trigger: "axis",
              showContent: false,
            },

            dataset: sourses,
            xAxis: { type: "category" },
            yAxis: { gridIndex: 0 },
            grid: { top: "55%" },
            toolbox: {
              show: true,
              orient: "vertical",
              left: "right",
              // top: "center",
              feature: {
                // mark: {show: true},
                // dataView: {show: true, readOnly: false ,Text:"数据视图"},
                // magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                // restore: {show: true},
                saveAsImage: { show: true },
              },
            },
            series: [
              {
                type: "line",
                smooth: true,
                seriesLayoutBy: "row",
                emphasis: { focus: "series" },
              },
              {
                type: "line",
                smooth: true,
                seriesLayoutBy: "row",
                emphasis: { focus: "series" },
              },
              {
                type: "line",
                smooth: true,
                seriesLayoutBy: "row",
                emphasis: { focus: "series" },
              },
              {
                type: "line",
                smooth: true,
                seriesLayoutBy: "row",
                emphasis: { focus: "series" },
              },
              {
                type: "pie",
                id: "pie",
                radius: "30%",
                center: ["50%", "25%"],
                emphasis: { focus: "data" },
                label: {
                  formatter: "{b}: {@2012} ({d}%)",
                },
                encode: {
                  itemName: "product",
                  value: "2012",
                  tooltip: "2012",
                },
              },
            ],
          });

        myChart.on("updateAxisPointer", function(event) {
          var xAxisInfo = event.axesInfo[0];
          if (xAxisInfo) {
            var dimension = xAxisInfo.value + 1;
            myChart.setOption({
              series: {
                id: "pie",
                label: {
                  formatter: "{b}: {@[" + dimension + "]} ({d}%)",
                },
                encode: {
                  value: dimension,
                  tooltip: dimension,
                },
              },
            });
          }
        });

        myChart.setOption(option);
      });

      option && myChart.setOption(option);
    },
  },

  data() {
    return {
      option: {
        legend: {},
        tooltip: {
          trigger: "axis",
          showContent: false,
        },
        dataset: {
          source: [
            ["product", "2012", "2013", "2014", "2015", "2016", "2017"],
            ["Milk Tea", 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
            ["Matcha Latte", 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
            ["Cheese Cocoa", 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
            ["Walnut Brownie", 25.2, 37.1, 41.2, 18, 33.9, 49.1],
          ],
        },
        xAxis: { type: "category" },
        yAxis: { gridIndex: 0 },
        grid: { top: "55%" },
        series: [
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "pie",
            id: "pie",
            radius: "30%",
            center: ["50%", "25%"],
            emphasis: { focus: "data" },
            label: {
              formatter: "{b}: {@2012} ({d}%)",
            },
            encode: {
              itemName: "product",
              value: "2012",
              tooltip: "2012",
            },
          },
        ],
      },
    };
  },
  components: {},
  props: ["source"],
  created() {
    console.log(this.props);
  },
});
</script>
<style>
.chart {
  height: 400px;
}
</style>
